<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>随手快递</title>
    <link rel="stylesheet" type="text/css" href="../../AUI/css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../../myCss/reset.css"/>
    <link rel="stylesheet" href="../../myCss/pullToRefresh.css"/>
    <style>
        .aui-card-list{
            margin-bottom: 0;
        }
        .sort{
            display: none;
            width: 90px;
            height: 136px;
            position: fixed;
            z-index: 99;
            background: #fff;
            left: 0;
            font-size: 14px;
            text-align: center;
            border-bottom:1px solid #ededed;
        }
        .sort div{
            padding: 6px 0;
            border-top:1px solid #ededed;
        }
        .act{
            color: #38c89f;
        }
        #wrapper {
            width: 100%;
            height:83%;
            max-width:640px;
            margin:0 auto;
            background: transparent;
        }
        .scroller li{
            border-bottom: 1px solid #dddddd !important;
        }
         .serBar{
        height:45px;
        background:#27AA9E;
        width:100%;
        top: 0;
   		position: fixed;
    	z-index: 100;
    	display:none;
        }
        .seript{
        height:30px;
        padding:0 0 0 10px;
        width:80%;
        margin:8px 3px 0 8px;
        font-size:13px;
        border-radius: 5px;
        }
    </style>
</head>
<body style="overflow-x: hidden">
<header class="aui-bar aui-bar-nav" id="aui-header">
    <a class="aui-btn aui-pull-left" tapmode onclick="location.href='../helpBuy/index.html'">
        <span class="fa fa-home fa-lg"></span>
    </a>
    <div class="aui-title">订单列表
    </div>
    <div class="aui-btn aui-pull-right" id="serh"><span class="fa fa-search"></span></div>
</header>
  
    <div class="serBar" id="serBar">
    <div><input class="seript" placeholder="输入购买商品名" id="search-input">
    <span class="fa fa-search" style="color:#fff;" id="ser" ></span>
    <span class="fa fa-window-close-o" style="margin-left:7px;color:#fff" id="close"></span>
    </div>
    </div>
<section class="aui-content"style="margin: 46px 0 5px 0" >
    <div class="aui-card-list" style="padding-left: 7px">
        <div style="font-size: 14px;color: #3d3d3d;padding: 5px;width:90px;text-align: center" >
            <span id="sortBtn">全部订单</span>
            <span>▽</span>
        </div>
        <div class="sort">
        <div  onclick="sortC(this)" class="act" temp="0">全部订单</div>
            <div onclick="sortC(this)" temp="1">待取件</div>
            <div  onclick="sortC(this)">派送中</div>
            <div onclick="sortC(this)">已完成</div>
        </div>
    </div>
</section>

<div id="wrapper" >
    <ul id="orderUl" class="aui-list aui-media-list">
    </ul>
</div>
<footer class="aui-bar aui-bar-tab" id="footer-c"></footer>

<script type="text/javascript" src="../../AUI/script/api.js" ></script>
<script src="../../myJs/jquery.js"></script>
<script src="../../myJs/jquery.cookie.js"></script>
<script src="../../myJs/iscroll.js"></script>
<script src="../../myJs/pullToRefresh.js"></script>
<script type="text/javascript" src="../../myJs/index.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
   /*  var data = {
        "code":"200",
        "msg": [
            {
                "orderId": "1",
                "purchaseAddress": "物美超市",
                "address": "江干区",
                "addressDetails":"文泽路四号大街五号路口",
                "demandCreatetime": "11：12",
                "orderCourierState":0
            },
            {
                "orderId": "2",
                "purchaseAddress": "金沙湖龙湖天街四楼",
                "address": "文泽路四号大街五号路口",
                "addressDetails":"物美超市",
                "demandCreatetime": "12：12",
                "orderCourierState":1
            },
            {
                "orderId": "3",
                "purchaseAddress": "浙江工商大学",
                "address": "钱江湾生活区",
                "addressDetails":"34幢",
                "demandCreatetime": "11：20",
                "orderCourierState":2
            }
        ]
    } */

    $(function(){
     	index();
        $("#item5").addClass("aui-active");
         $.ajax({
         type: "post",
         url: '/randomdelivery/userCourierManageController/courierOwnOrder',
         data: {
         },
         datatype: "json",
         success: function (data) {
         alert(JSON.stringify(data));
         viewList(data);
         }

         });
       
        
    });

    function viewList(data){
        $.each(data.msg, function (num,data) {
            var orderCourierState;
            if(data.orderCourierState==0){
                orderCourierState = "待取件";
            }else if(data.orderCourierState==1){
                orderCourierState = "派件中";
            }else if(data.orderCourierState==2){
                orderCourierState = "已完成";
            }
            $("#orderUl").append(' <li class="aui-list-item aui-list-item-middle">\
                    <div class="aui-media-list-item-inner" onclick="details(this)" orderId="'+data.orderId+'">\
                    <div class="aui-list-item-inner">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"> <span class="fa fa-circle-o" style="font-size:10px;color: #2f82f9"></span>&nbsp;<span>'+data.purchaseAddress+'</span></div>\
                    <div class="aui-list-item-right"><span>'+orderCourierState+'</span></div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"><span class="fa fa-dot-circle-o" style="font-size:10px;color: #fb5212"></span>&nbsp;<span>'+data.address+data.addressDetails+'</span></div>\
            <div class="aui-list-item-right">期望<span>'+data.demandCreatetime+'</span>送达</div>\
            </div> </div> </div> </li>');
        })
    }
    $("#sortBtn").on("click",function(){
        $(".sort").fadeIn("slow");
    })
    function sortC(node){
 $(".sort div").removeClass("act");
        var method = node.innerHTML;
        node.className='act';
        $(".sort").fadeOut("slow");
        $("#sortBtn").html(method);
        alert(node.getAttribute("temp"));
    }

    function details(node){
        var orderId = node.getAttribute("orderId");
        alert(orderId);
        sessionStorage.setItem("orderId",orderId);
       location.href="orderDetail.html";
    }
    
           /* 搜索 */
    $("#ser").on("click",function(){
    	var str = $("#search-input").val();
        $.ajax({
            type: "post",
            url: '/randomdelivery/userManageController/',
            data: {
            	temp:str
            },
            datatype: "json",
            success: function (data) {
                alert(JSON.stringify(data));
               $("#search-input").val("");
               $("#aui-header").show();
           	$("#serBar").hide();
            }

        });
    	
    })
        $("#close").on("click",function(){
        	$("#aui-header").show();
        	$("#serBar").hide();
    })
     $("#serh").on("click",function(){
        	$("#aui-header").hide();
        	$("#serBar").show();
    })
</script>
<script>
    refresher.init({
        id:"wrapper",
        pullDownAction:Refresh,
        pullUpAction:Load
    });
    function Refresh() {
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            //这里写你的刷新代码
            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none";
            setTimeout(function () {
                wrapper.refresh();
                var el, li, i;
                el =document.querySelector("#wrapper ul");
                $.each(data.msg,function(num,data){
                    var orderCourierState;
                    if(data.orderCourierState==0){
                        orderCourierState = "待取件";
                    }else if(data.orderCourierState==1){
                        orderCourierState = "派件中";
                    }else if(data.orderCourierState==2){
                        orderCourierState = "已完成";
                    }
                    li = document.createElement('li');
                    li.innerHTML = ' <div class="aui-media-list-item-inner" onclick="details(this)">\
                    <div class="aui-list-item-inner">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"> <span class="fa fa-circle-o" style="font-size:10px;color: #2f82f9"></span>&nbsp;<span>'+data.purchaseAddress+'</span></div>\
                    <div class="aui-list-item-right"><span>'+orderCourierState+'</span></div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"><span class="fa fa-dot-circle-o" style="font-size:10px;color: #fb5212"></span>&nbsp;<span>'+data.address+data.addressDetails+'</span></div>\
            <div class="aui-list-item-right">期望<span>'+data.demandCreatetime+'</span>送达</div>\
            </div> </div> </div>';
                    el.insertBefore(li, el.childNodes[0]);
                })
            },1000);//模拟qq下拉刷新显示成功效果
            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
        }, 1000);
    }
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el =document.querySelector("#wrapper ul");
            $.each(data.msg,function(num,data){
                var orderCourierState;
                if(data.orderCourierState==0){
                    orderCourierState = "待取件";
                }else if(data.orderCourierState==1){
                    orderCourierState = "派件中";
                }else if(data.orderCourierState==2){
                    orderCourierState = "已完成";
                }
                li = document.createElement('li');
                li.innerHTML='<div class="aui-media-list-item-inner" onclick="details(this)">\
                    <div class="aui-list-item-inner">\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"> <span class="fa fa-circle-o" style="font-size:10px;color: #2f82f9"></span>&nbsp;<span>'+data.purchaseAddress+'</span></div>\
                    <div class="aui-list-item-right"><span>'+orderCourierState+'</span></div>\
                    </div>\
                    <div class="aui-list-item-text">\
                    <div class="aui-list-item-title aui-font-size-14"><span class="fa fa-dot-circle-o" style="font-size:10px;color: #fb5212"></span>&nbsp;<span>'+data.address+data.addressDetails+'</span></div>\
            <div class="aui-list-item-right">期望<span>'+data.demandCreatetime+'</span>送达</div>\
            </div> </div> </div>';
                el.appendChild(li, el.childNodes[0]);
            })
            wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
        },1000);
    }
</script>
</body>
</html>